import React from 'react';

interface SpeedControlProps {
  speed: number;
  onSpeedChange: (speed: number) => void;
}

export const SpeedControl: React.FC<SpeedControlProps> = ({ speed, onSpeedChange }) => {
  const speeds = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];

  return (
    <div className="relative group">
      <button
        className="flex items-center space-x-1 px-2 py-1 rounded-md hover:bg-gray-100 transition-colors"
        aria-label="调整语速"
      >
        <svg 
          className="w-5 h-5" 
          viewBox="0 0 24 24" 
          fill="none" 
          stroke="currentColor"
        >
          <path 
            strokeLinecap="round" 
            strokeLinejoin="round" 
            strokeWidth={2} 
            d="M13 10V3L4 14h7v7l9-11h-7z"
          />
        </svg>
        <span className="w-12 text-center">{speed}x</span>
      </button>
      
      <div className="absolute hidden group-hover:block top-full left-0 bg-white shadow-lg rounded-md p-1 z-10">
        {speeds.map((s) => (
          <button
            key={s}
            onClick={() => onSpeedChange(s)}
            className={`block w-full text-left px-3 py-1 rounded-md ${
              speed === s ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-50'
            }`}
          >
            <span className="w-14 inline-block text-center">{s}x</span>
          </button>
        ))}
      </div>
    </div>
  );
}; 